<template>
  <div>
    <div class="absolute w-full h-full z-10 flex justify-center items-center flex-col pb-24">
      <button
        class="shadow-2xl my-4 py-8 px-16 text-2xl font-black rounded-lg bg-blue-400 dark:bg-blue-900 rotate-12 hover:scale-125 transition"
        @click="handleOfficeSet(1)"
      >
        管制一室
      </button>
      <button
        class="shadow-2xl my-4 py-8 px-16 text-2xl font-black rounded-lg bg-green-400 dark:bg-green-900 rotate-12 hover:scale-125 transition"
        @click="handleOfficeSet(2)"
      >
        管制二室
      </button>
    </div>
    <img
      class="blur-md w-screen h-screen invert dark:invert-0 opacity-60 dark:opacity-90 grayscale dark:grayscale-0 brightness-200 dark:brightness-75 scale-105 -translate-y-4 -translate-x-2 absolute z-0 object-cover"
      src="@/assets/background.svg"
    />
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import useViewStore from '@/stores/view.js'
const router = useRouter()
const viewStore = useViewStore()
const handleOfficeSet = (value) => {
  viewStore.office = value
  viewStore.type = 'all'
  viewStore.page = 0
  viewStore.load()
  router.push({ name: 'home' })
}
</script>
